<template>
  <div class="course-list flex flex-col sm:flex-row dark:bg-regal-dark w-full">
    <div :class="'w-full ml-0 sm:ml-2 mt-2 sm:mt-0' ">
      <div class="table-default">
        <div class="pt-5 pl-2">
          <el-button type="primary" @click="visible = true"><Icon name="plus" className="w-4 h-4 mr-1" /> 添加老师</el-button>
        </div>
        <el-table
            :data="tableData"
            class="course-table mt-3"
            border
            style="width: 100%"
        >
          <el-table-column
              v-for="item in headerConfig"
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
          >
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="text" @click="visible = true">编辑</el-button>
              <el-button type="text" @click="visible = true">删除</el-button>
              <el-button type="text" @click="visible = true">重置密码</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-dialog v-model="visible" title="修改上课时间" destroy-on-close>
        <div class="edit-dialog">
          <el-form :label-width="100">
            <el-form-item label="老师名">
              <el-input  v-model="form.name"  placeholder="老师名"></el-input>
            </el-form-item>
            <el-form-item label="负责学科">
              <el-select multiple>
                <el-option label="一年级/语文"></el-option>
                <el-option label="一年级/语文"></el-option>
                <el-option label="一年级/语文"></el-option>

              </el-select>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input  v-model="form.mobile"  placeholder="老师名"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="visible = false">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useGetList } from '/admin/composables/curd/useGetList'
const api = 'course'
const { data, query, search, reset, loading } = useGetList(api)
const form = ref({
  name: '',
  mobile: '',
})
// 日历table 的头部配置
const headerConfig = [
  {
    prop: 'value',
    label: '老师名',
  },
  {
    prop: 'value1',
    label: '负责学科',
  },
  {
    prop: 'value2',
    label: '手机号',
  },
]
const tableData = [
  {
    value1: '111',
    value2: '222',
    value3: '333',
    value4: '444',
    value5: '555',
    value6: '666',
    value7: '777',
  },
  {
    value1: '111',
    value2: '222',
    value3: '333',
    value4: '444',
    value5: '555',
    value6: '666',
    value7: '777',
  },{
    value1: '111',
    value2: '222',
    value3: '333',
    value4: '444',
    value5: '555',
    value6: '666',
    value7: '777',
  },{
    value1: '111',
    value2: '222',
    value3: '333',
    value4: '444',
    value5: '555',
    value6: '666',
    value7: '777',
  },
]
const visible = ref(false)
const value1 = ref('')
const checkedCities = ref(['2024-03-11', '2024-03-12'])
const cities = ['2024-03-11', '2024-03-12', '2024-03-13', '2024-03-14', '2024-03-15', '2024-03-16', '2024-03-17']
const checkAll = ref(false)
const isIndeterminate = ref(false)
const handleCheckAllChange = (val: boolean) => {
  checkedCities.value = val ? cities : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}

</script>

<style scoped lang="scss">
.course-list {
  height: calc(100vh - 120px);
}
.table-default {
  height: calc(100% - 180px);
}
.course-table {
  background: #fff;
  .table {
    width: 100%;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    .course-header {
      height: 60px;
      td {
        text-align: center;
        border-right: 1px solid #ebeef5;
        border-bottom: 1px solid #e1e4e8;
      }
    }
    .course-tr {
      border-bottom: 1px solid #e1e4e8;

      .time {
        width: 100px;
        text-align: center;
        border-right: 1px solid #ebeef5;
      }
      .course-item {
        border-right: 1px solid #ebeef5;
        width: calc(100% / 7.6);
        height: 110px;
        padding: 4px;
        .active {
          height: 100%;
          color: #7C93C3;
          background: #DFF5FF;
          border-radius: 4px;
          padding: 10px;
        }
      }
    }
  }
}
.edit-dialog {
  padding: 36px;
}
</style>
